<template>
  <div
      class="gantt_layout_cell  timeline_cell gantt_layout_outer_scroll gantt_layout_outer_scroll_vertical gantt_layout_outer_scroll gantt_layout_outer_scroll_horizontal"
      data-cell-id="1737073038741" style="margin-right: 0px; width: 1230px; height: 105px;">
    <div class="gantt_layout_content" style="height: 105px;">
      <div class="gantt_task" style="width:inherit;height:inherit;">
        <div class="gantt_task_scale" style="height: 70px; width: 1230px;">
          <div class="gantt_scale_line" style="height:23px;position:relative;line-height:23px">
            <div class="gantt_scale_cell" aria-label="2025年 1月"
                 style="width:782px;height:23px;position:absolute;left:0px">2025年 1月
            </div>
            <div class="gantt_scale_cell gantt_last_cell" aria-label="2025年 2月"
                 style="width:448px;height:23px;position:absolute;left:782px">2025年 2月
            </div>
          </div>
          <div class="gantt_scale_line" style="height:23px;position:relative;line-height:23px">
            <div class="gantt_scale_cell" aria-label="2周" style="width:136px;height:23px;position:absolute;left:0px">
              2周
            </div>
            <div class="gantt_scale_cell" aria-label="3周" style="width:238px;height:23px;position:absolute;left:136px">
              3周
            </div>
            <div class="gantt_scale_cell" aria-label="4周" style="width:238px;height:23px;position:absolute;left:374px">
              4周
            </div>
            <div class="gantt_scale_cell" aria-label="5周" style="width:238px;height:23px;position:absolute;left:612px">
              5周
            </div>
            <div class="gantt_scale_cell" aria-label="6周" style="width:240px;height:23px;position:absolute;left:850px">
              6周
            </div>
            <div class="gantt_scale_cell gantt_last_cell" aria-label="7周"
                 style="width:140px;height:23px;position:absolute;left:1090px">7周
            </div>
          </div>
          <div class="gantt_scale_line" style="height:23px;position:relative;line-height:23px">
            <div class="gantt_scale_cell" aria-label="9" style="width:34px;height:23px;position:absolute;left:0px">9
            </div>
            <div class="gantt_scale_cell" aria-label="10" style="width:34px;height:23px;position:absolute;left:34px">
              10
            </div>
            <div class="gantt_scale_cell" aria-label="11" style="width:34px;height:23px;position:absolute;left:68px">
              11
            </div>
            <div class="gantt_scale_cell" aria-label="12" style="width:34px;height:23px;position:absolute;left:102px">
              12
            </div>
            <div class="gantt_scale_cell" aria-label="13" style="width:34px;height:23px;position:absolute;left:136px">
              13
            </div>
            <div class="gantt_scale_cell" aria-label="14" style="width:34px;height:23px;position:absolute;left:170px">
              14
            </div>
            <div class="gantt_scale_cell" aria-label="15" style="width:34px;height:23px;position:absolute;left:204px">
              15
            </div>
            <div class="gantt_scale_cell" aria-label="16" style="width:34px;height:23px;position:absolute;left:238px">
              16
            </div>
            <div class="gantt_scale_cell" aria-label="17" style="width:34px;height:23px;position:absolute;left:272px">
              17
            </div>
            <div class="gantt_scale_cell" aria-label="18" style="width:34px;height:23px;position:absolute;left:306px">
              18
            </div>
            <div class="gantt_scale_cell" aria-label="19" style="width:34px;height:23px;position:absolute;left:340px">
              19
            </div>
            <div class="gantt_scale_cell" aria-label="20" style="width:34px;height:23px;position:absolute;left:374px">
              20
            </div>
            <div class="gantt_scale_cell" aria-label="21" style="width:34px;height:23px;position:absolute;left:408px">
              21
            </div>
            <div class="gantt_scale_cell" aria-label="22" style="width:34px;height:23px;position:absolute;left:442px">
              22
            </div>
            <div class="gantt_scale_cell" aria-label="23" style="width:34px;height:23px;position:absolute;left:476px">
              23
            </div>
            <div class="gantt_scale_cell" aria-label="24" style="width:34px;height:23px;position:absolute;left:510px">
              24
            </div>
            <div class="gantt_scale_cell" aria-label="25" style="width:34px;height:23px;position:absolute;left:544px">
              25
            </div>
            <div class="gantt_scale_cell" aria-label="26" style="width:34px;height:23px;position:absolute;left:578px">
              26
            </div>
            <div class="gantt_scale_cell" aria-label="27" style="width:34px;height:23px;position:absolute;left:612px">
              27
            </div>
            <div class="gantt_scale_cell" aria-label="28" style="width:34px;height:23px;position:absolute;left:646px">
              28
            </div>
            <div class="gantt_scale_cell" aria-label="29" style="width:34px;height:23px;position:absolute;left:680px">
              29
            </div>
            <div class="gantt_scale_cell" aria-label="30" style="width:34px;height:23px;position:absolute;left:714px">
              30
            </div>
            <div class="gantt_scale_cell" aria-label="31" style="width:34px;height:23px;position:absolute;left:748px">
              31
            </div>
            <div class="gantt_scale_cell" aria-label="1" style="width:34px;height:23px;position:absolute;left:782px">1
            </div>
            <div class="gantt_scale_cell" aria-label="2" style="width:34px;height:23px;position:absolute;left:816px">2
            </div>
            <div class="gantt_scale_cell" aria-label="3" style="width:34px;height:23px;position:absolute;left:850px">3
            </div>
            <div class="gantt_scale_cell" aria-label="4" style="width:34px;height:23px;position:absolute;left:884px">4
            </div>
            <div class="gantt_scale_cell" aria-label="5" style="width:34px;height:23px;position:absolute;left:918px">5
            </div>
            <div class="gantt_scale_cell" aria-label="6" style="width:34px;height:23px;position:absolute;left:952px">6
            </div>
            <div class="gantt_scale_cell" aria-label="7" style="width:34px;height:23px;position:absolute;left:986px">7
            </div>
            <div class="gantt_scale_cell" aria-label="8" style="width:35px;height:23px;position:absolute;left:1020px">
              8
            </div>
            <div class="gantt_scale_cell" aria-label="9" style="width:35px;height:23px;position:absolute;left:1055px">
              9
            </div>
            <div class="gantt_scale_cell" aria-label="10" style="width:35px;height:23px;position:absolute;left:1090px">
              10
            </div>
            <div class="gantt_scale_cell" aria-label="11" style="width:35px;height:23px;position:absolute;left:1125px">
              11
            </div>
            <div class="gantt_scale_cell" aria-label="12" style="width:35px;height:23px;position:absolute;left:1160px">
              12
            </div>
            <div class="gantt_scale_cell gantt_last_cell" aria-label="13"
                 style="width:35px;height:23px;position:absolute;left:1195px">13
            </div>
          </div>
        </div>
        <div class="gantt_data_area" style="width: 1230px; height: 35px;">
          <div class="gantt_task_bg" data-layer="true" style="height: 35px; width: 1230px;">
            <div class="gantt_task_row" data-task-id="88" task_id="88"
                 style="position: absolute; top: 0px; width: 100%; height: 35px;">
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 0px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 34px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 68px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 102px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 136px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 170px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 204px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 238px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 272px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 306px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 340px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 374px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 408px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 442px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 476px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 510px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 544px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 578px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 612px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 646px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 680px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 714px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 748px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 782px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 816px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 850px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 884px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 918px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 952px;"></div>
              <div class="gantt_task_cell" style="width: 34px; position: absolute; left: 986px;"></div>
              <div class="gantt_task_cell" style="width: 35px; position: absolute; left: 1020px;"></div>
              <div class="gantt_task_cell" style="width: 35px; position: absolute; left: 1055px;"></div>
              <div class="gantt_task_cell" style="width: 35px; position: absolute; left: 1090px;"></div>
              <div class="gantt_task_cell" style="width: 35px; position: absolute; left: 1125px;"></div>
              <div class="gantt_task_cell" style="width: 35px; position: absolute; left: 1160px;"></div>
              <div class="gantt_task_cell gantt_last_cell" style="width: 35px; position: absolute; left: 1195px;"></div>
            </div>
          </div>
          <div class="gantt_links_area" data-layer="true" style="width: 1230px;"></div>
          <div class="gantt_bars_area" data-layer="true" style="width: 1230px;">
            <div data-task-id="88" task_id="88" class="gantt_task_line gantt_bar_task gantt_task_inline_color"
                 aria-label=" Task: 带里程碑的任务测试 Start date: 2025-01-10 End date: 2025-02-12" role="img"
                 style="left: 34px; top: 2px; height: 30px; line-height: 30px; width: 1126px; background-color: rgba(125, 193, 90, 0.7);">
              <div class="gantt_task_progress_wrapper">
                <div>进行中</div>
              </div>
              <div class="gantt_task_content">
                <div>进行中</div>
              </div>
              <div class="custom-milestone" style="left: 408px; top: 50%; transform: translateY(-50%);"><i
                  class="el-icon-s-flag"></i>
                <div class="custom-popover" style="display: none;"><h3>第一个里程碑</h3>
                  <p>Tue Jan 21 2025 00:00:00 GMT+0800 (中国标准时间)</p></div>
              </div>
              <div class="custom-milestone" style="left: 884px; top: 50%; transform: translateY(-50%);"><i
                  class="el-icon-s-flag"></i>
                <div class="custom-popover" style="display: none;"><h3>第二个里程碑</h3>
                  <p>Tue Feb 04 2025 00:00:00 GMT+0800 (中国标准时间)</p></div>
              </div>
              <div class="custom-milestone" style="left: 408px; top: 50%; transform: translateY(-50%);"><i
                  class="el-icon-s-flag"></i>
                <div class="custom-popover" style="display: none;"><h3>第一个里程碑</h3>
                  <p>Tue Jan 21 2025 00:00:00 GMT+0800 (中国标准时间)</p></div>
              </div>
              <div class="custom-milestone" style="left: 884px; top: 50%; transform: translateY(-50%);"><i
                  class="el-icon-s-flag"></i>
                <div class="custom-popover" style="display: none;"><h3>第二个里程碑</h3>
                  <p>Tue Feb 04 2025 00:00:00 GMT+0800 (中国标准时间)</p></div>
              </div>
            </div>
          </div>
          <div class="gantt_marker_area">
            <div data-layer="true"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {gantt} from "dhtmlx-gantt";

export default {
  name: "ToolFile",
}
</script>

<style scoped>
::v-deep .delayed {
  border: 2px solid red; /* 延期任务的边框颜色 */
}

::v-deep .milestone {
  background-color: yellow; /* 里程碑的背景颜色 */
  padding: 2px;
  border-radius: 4px;
}
</style>
